<template>
    <div>
        <van-row>
            <h4>测试舵机旋转</h4>
            <van-field v-model="baseUrl" label="IP地址" placeholder="请输入地址"/>
        </van-row>
        <van-row>
            <div style="margin:30px">
                <van-slider v-model="value" :min="0" :max="180" active-color="#ee0a24" @change="handleChange">
                    <template #button>
                        <div class="custom-button">{{ value }}</div>
                    </template>
                </van-slider>
            </div>
        </van-row>
        <v-row>
            <h4>WS2812纯色点亮</h4>
            <van-radio-group v-model="radio" direction="horizontal" style="margin-left: 10px" @change="onChange">
                <van-radio name="1">白色<div style=";background-color: #FFFFFF;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="2">红色<div style=";background-color: #b52b27;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="3">橙色<div style=";background-color: #ffa500;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="4">黄色<div style=";background-color: #ffff00;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="5">绿色<div style=";background-color: #00FF00;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="6">青色<div style=";background-color: #00FFFF;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="7">蓝色<div style=";background-color: #0000FF;height: 10px;width: 30px"></div></van-radio>
                <van-radio name="8">紫色<div style=";background-color: #FF00FF;height: 10px;width: 30px"></div></van-radio>
            </van-radio-group>
        </v-row>
        <van-row>
            <h4>WS2812灯光效果</h4>
            <van-button plain type="primary" size="normal" @click="handleWsLight('horse')">
                跑马灯
            </van-button>
            <van-button plain type="primary" size="normal" style="margin-left: 30px" @click="handleWsLight('meteor')">
                流星闪
            </van-button>
            <van-button plain type="primary" size="normal" style="margin-left: 30px" @click="handleWsLight('rainbow')">
                彩虹光
            </van-button>
        </van-row>
        <van-row style="margin-top: 10px">
            <van-button plain type="primary" size="normal" @click="handleWsLight('theaterChas')">
                流水灯
            </van-button>
            <van-button plain type="primary" size="normal" style="margin-left: 30px" @click="handleWsLight('random')">
                随机闪
            </van-button>
            <van-button plain type="primary" size="normal" style="margin-left: 30px" @click="handleWsLight('off')">
                关闭灯
            </van-button>
        </van-row>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                value: 0,
                baseUrl: "http://192.168.0.102",
                radio:'0'
            }
        },
        methods: {
            handleChange() {
                console.log(this.value);
                this.$axios.get(this.baseUrl + "/servo?degrees=" + this.value).then(
                    response => {
                        console.log("请求成功了3", response.data);
                    },
                    error => {
                        console.log("请求失败了3", error.message)
                    }
                )
            },
            handleWsLight(value) {
                console.log(value);
                this.$axios.get("/wsLight?param=" + value).then(
                    response => {
                        console.log("请求成功了4", response.data);
                    },
                    error => {
                        console.log("请求失败了4", error.message)
                    }
                )
            },
            onChange(val) {
                console.log("/wsLight?param=color" + val); // 当颜色发生变化时，会打印出新的颜色值
                this.$axios.get("/wsLight?param=color" + val).then(
                    response => {
                        console.log("请求成功了5", response.data);
                    },
                    error => {
                        console.log("请求失败了5", error.message)
                    }
                )
            }
        }
    }
</script>

<style scoped>

</style>